<template>
    <mobile-top-menu :data="menuData"></mobile-top-menu>
    <div class="user-info">
        <div class="u-i-content">
            <div class="u-i-c_top">
                <div class="u-t-img">
                    <div class="u-t-i">
                        <img :src="userInfo.avator" alt="">
                    </div>
                </div>
            </div>
            <div class="u-i-c_bottom">
                <el-row class="u-t-menu">
                    <el-col :xs="12" :sm="12">
                        <div class="ut-m ut-m-collect" :class="{'ut-m-active': chooseType == 'collect'}" @click="clickMenu('collect')">
                            <div class="m-c-h f-c-c" :class="{'active': chooseType == 'collect'}">收藏
                                <span class="m-c-count"></span>
                                <span><svg t="1681527101700" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5981" width="16" height="16"><path d="M940.936189 483.222583l-16.813944-16.404622c-23.277146-22.642696-60.989049-22.642696-84.258009 0L511.412622 786.512121 182.958962 466.817961c-23.26896-22.642696-60.980863-22.642696-84.214007 0L81.889055 483.222583c-23.236214 22.64065-23.236214 59.349713 0 81.954547l370.436844 360.591615c0.032746 0.040932 0.067538 0.110517 0.110517 0.152473l16.84669 16.371876c23.234167 22.64065 60.946071 22.64065 84.223217 0l16.84669-16.371876c0.044002-0.040932 0.078795-0.110517 0.110517-0.152473l370.395912-360.591615C964.205149 542.572296 964.205149 505.863233 940.936189 483.222583L940.936189 483.222583z" fill="#272636" p-id="5982"></path></svg></span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xs="12" :sm="12">
                        <div class="ut-m ut-m-poems f-c-c" :class="{'ut-m-active': chooseType == 'poems'}" @click="clickMenu('poems')">
                            <div class="m-c-h" :class="{'active': chooseType == 'poems'}">诗单
                                <span class="m-c-count">{{ createPoemsList.length }}</span>
                                <span><svg t="1681527101700" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5981" width="16" height="16"><path d="M940.936189 483.222583l-16.813944-16.404622c-23.277146-22.642696-60.989049-22.642696-84.258009 0L511.412622 786.512121 182.958962 466.817961c-23.26896-22.642696-60.980863-22.642696-84.214007 0L81.889055 483.222583c-23.236214 22.64065-23.236214 59.349713 0 81.954547l370.436844 360.591615c0.032746 0.040932 0.067538 0.110517 0.110517 0.152473l16.84669 16.371876c23.234167 22.64065 60.946071 22.64065 84.223217 0l16.84669-16.371876c0.044002-0.040932 0.078795-0.110517 0.110517-0.152473l370.395912-360.591615C964.205149 542.572296 964.205149 505.863233 940.936189 483.222583L940.936189 483.222583z" fill="#272636" p-id="5982"></path></svg></span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <div class="u-t-content">
                    <!-- 收藏 -->
                    <div class="u-t-c" v-if="chooseType == 'collect'">
                        <!-- 诗词 -->
                        <div class="no-data f-c-c" v-if="collectPoetry.length < 1 && collectPoemsList.length < 1">暂无数据</div>
                        <div class="md-menu md-menu1" v-if="collectPoetry.length > 1 || collectPoemsList.length > 1" @click="openPoetry">作品
                            <span class="md-len">{{ collectPoetry.length }}</span>
                            <span v-if="!isOpenPoetry"><svg t="1681544579886" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7884" width="16" height="16"><path d="M390.948571 897.462857a53.028571 53.028571 0 0 1-38.765714-16.091428 54.491429 54.491429 0 0 1 0-77.531429l288.914286-288.914286-288.914286-288.914285a54.491429 54.491429 0 0 1 0-77.531429 55.222857 55.222857 0 0 1 77.531429 0l365.714285 365.714286-365.714285 365.714285a54.125714 54.125714 0 0 1-38.765715 17.554286z" fill="#161616" p-id="7885"></path></svg></span>
                            <span v-if="isOpenPoetry" class="open"><svg t="1681527101700" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5981" width="16" height="16"><path d="M940.936189 483.222583l-16.813944-16.404622c-23.277146-22.642696-60.989049-22.642696-84.258009 0L511.412622 786.512121 182.958962 466.817961c-23.26896-22.642696-60.980863-22.642696-84.214007 0L81.889055 483.222583c-23.236214 22.64065-23.236214 59.349713 0 81.954547l370.436844 360.591615c0.032746 0.040932 0.067538 0.110517 0.110517 0.152473l16.84669 16.371876c23.234167 22.64065 60.946071 22.64065 84.223217 0l16.84669-16.371876c0.044002-0.040932 0.078795-0.110517 0.110517-0.152473l370.395912-360.591615C964.205149 542.572296 964.205149 505.863233 940.936189 483.222583L940.936189 483.222583z" fill="#272636" p-id="5982"></path></svg></span>
                        </div>
                        <ul class="md-b-ul" v-if="collectPoetry.length > 0 && isOpenPoetry">
                            <li class="md-b-li" v-for="item in collectPoetry" :key="item.pid" @click.prevent="goToPoetryDetail(item.pid)">
                                <div class="li-top f-b-r">
                                    <div class="l-title ellipsis">{{ item.p_title }}</div>
                                    <div class="l-dynasty">[{{ item.p_dynasty }}]&nbsp;{{ item.a_name }}</div>
                                </div>
                                <div class="l-content ellipsis">{{ item.p_content.split('。')[0] }}。</div>
                            </li>
                        </ul>
                        <!-- <div class="divider f-c-c">
                            <hr/>
                        </div> -->
                        <!-- 诗单 -->
                        <div class="md-menu" v-if="collectPoetry.length > 1 || collectPoemsList.length > 1" @click="openPoems">诗单
                            <span class="md-len">{{ collectPoemsList.length }}</span>
                            <span v-if="!isOpenPoems"><svg t="1681544579886" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7884" width="16" height="16"><path d="M390.948571 897.462857a53.028571 53.028571 0 0 1-38.765714-16.091428 54.491429 54.491429 0 0 1 0-77.531429l288.914286-288.914286-288.914286-288.914285a54.491429 54.491429 0 0 1 0-77.531429 55.222857 55.222857 0 0 1 77.531429 0l365.714285 365.714286-365.714285 365.714285a54.125714 54.125714 0 0 1-38.765715 17.554286z" fill="#161616" p-id="7885"></path></svg></span>
                            <span v-if="isOpenPoems" class="open"><svg t="1681527101700" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5981" width="16" height="16"><path d="M940.936189 483.222583l-16.813944-16.404622c-23.277146-22.642696-60.989049-22.642696-84.258009 0L511.412622 786.512121 182.958962 466.817961c-23.26896-22.642696-60.980863-22.642696-84.214007 0L81.889055 483.222583c-23.236214 22.64065-23.236214 59.349713 0 81.954547l370.436844 360.591615c0.032746 0.040932 0.067538 0.110517 0.110517 0.152473l16.84669 16.371876c23.234167 22.64065 60.946071 22.64065 84.223217 0l16.84669-16.371876c0.044002-0.040932 0.078795-0.110517 0.110517-0.152473l370.395912-360.591615C964.205149 542.572296 964.205149 505.863233 940.936189 483.222583L940.936189 483.222583z" fill="#272636" p-id="5982"></path></svg></span>
                        </div>
                        <ul class="md-b-ul" v-if="collectPoemsList.length > 0 && isOpenPoems">
                            <li class="md-b-li" v-for="item in collectPoemsList" :key="item.pl_id" @click.prevent="goToPoemsDetail(item.pl_id)">
                                <div class="md-poems-list">
                                    <div class="pl-left">
                                        <img :src="(item.pl_cover &&  item.pl_cover != '无') ? item.pl_cover : getAssetsFile('cover/poems/default-poems.png')" alt="">
                                    </div>
                                    <div class="pl-right">
                                        <div class="pl-name">{{ item.pl_name }}</div>
                                        <!-- <div class="pl-creator">{{ item.nickname }}</div> -->
                                    </div>
                                </div>
                                <!-- <div class="l-content ellipsis">{{ item.p_content.split('。')[0] }}。</div> -->
                            </li>
                        </ul>
                    </div>
                    <!-- 诗单 -->
                    <div class="u-t-c" v-if="chooseType == 'poems'">
                        <div class="no-data f-c-c" v-if="createPoemsList.length < 1">暂无数据</div>
                        <div class="create-poetry" v-if="createPoemsList.length > 0">
                            <ul class="c-p-ul">
                                <li class="cp-u-li" v-for="item in createPoemsList" :key="item.pl_id" @click="goToPoemsDetail(item.pl_id)">
                                    <div class="li-cover" v-if="item.pl_cover">
                                        <img :src="(item.pl_cover != '无' && item.pl_cover) ? item.pl_cover : getAssetsFile('cover/poems/default-poems.png')" alt="">
                                        <div class="li-c-lock" v-if="item.make_private"><svg t="1681557960010" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1880" width="16" height="16"><path d="M305.460841 257.560233C316.629252 257.560233 325.6814 248.508085 325.6814 237.339673 325.6814 134.73501 409.157769 51.272294 511.748779 51.272294 614.339789 51.272294 697.802504 134.73501 697.802504 237.339673 697.802504 248.508085 706.854652 257.560233 718.036717 257.560233 729.205129 257.560233 738.257277 248.508085 738.257277 237.339673 738.257277 112.425493 636.649306 10.817522 511.748779 10.817522 386.848252 10.817522 285.240281 112.425493 285.240281 237.339673 285.240281 248.508085 294.292429 257.560233 305.460841 257.560233M511.746048 727.011724C461.419929 727.011724 420.48729 686.079085 420.48729 635.752966 420.48729 585.440499 461.419929 544.494207 511.746048 544.494207 562.072168 544.494207 603.004807 585.440499 603.004807 635.752966 603.004807 686.079085 562.072168 727.011724 511.746048 727.011724M511.746048 504.039435C439.124065 504.039435 380.032517 563.130982 380.032517 635.752966 380.032517 701.493678 428.488133 755.970405 491.525489 765.746179L491.525489 869.238308C491.525489 880.406719 500.577637 889.458867 511.746048 889.458867 522.91446 889.458867 531.966608 880.406719 531.966608 869.238308L531.966608 765.746179C595.003964 755.970405 643.459579 701.493678 643.459579 635.752966 643.459579 563.130982 584.368032 504.039435 511.746048 504.039435M901.119481 889.091593C901.119481 941.165337 858.753244 983.545227 806.6795 983.545227L216.815327 983.545227C164.741583 983.545227 122.375346 941.165337 122.375346 889.091593L122.375346 464.432533C122.375346 412.358789 164.741583 369.978899 216.815327 369.978899L806.6795 369.978899C858.753244 369.978899 901.119481 412.358789 901.119481 464.432533L901.119481 889.091593ZM806.6795 329.537779 216.815327 329.537779C142.432066 329.537779 81.920573 390.049272 81.920573 464.432533L81.920573 889.091593C81.920573 963.474854 142.432066 1024 216.815327 1024L806.6795 1024C881.062761 1024 941.574254 963.474854 941.574254 889.091593L941.574254 464.432533C941.574254 390.049272 881.062761 329.537779 806.6795 329.537779L806.6795 329.537779Z" fill="#272636" p-id="1881"></path></svg></div>
                                    </div>
                                    <div class="li-right">
                                        <div class="li-name ellipsis">{{ item.pl_name }}</div>
                                        <div class="li-count">{{ item.poetry_count }}首</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="c-p-title" @click="createPoems">
                            <span class="add-icon">
                                <svg t="1681546673649" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8929" width="16" height="16"><path d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z" p-id="8930"></path></svg>
                            </span>
                            创建诗单
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <create-poems-alert v-if="isOpenCreatePoemsAlert" @closeAlert="closeAlert"></create-poems-alert>
</template>

<script setup lang="ts">
import { IUserInfoModel } from '@/model'
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import userInfoStore from './user-info.store'
import { getAssetsFile } from '@/utils/util'
import CreatePoemsAlert from './component/create-poems-alert.vue'
import poetryDetailStore from '../poetry-detail/poetry-detail.store'

const router = useRouter()
const userInfoSe = userInfoStore()
const poetryDetailSe = poetryDetailStore()
const back = () => {
    router.push({
        name: 'setting'
    })
}

const menuData = computed(() => {
    return {
        // leftMsg: '返回',
        centerMsg: userInfo.value.nickname
    }
})

let chooseType = ref<string>('collect')
const clickMenu = (val: string) => {
    chooseType.value = val
}

// 获取用户信息
let userInfo = ref({} as IUserInfoModel) 
let collectPoemsList = ref<any>([]) 
let createPoemsList = ref<any>([]) 
let collectPoetry = ref<any>([]) 
const getUserInfo = () => {
    userInfoSe.getUserInfo().then((res: any) => {
        if(res.status == 'success') {
            collectPoemsList.value = res.results.collectPoems
            // createPoemsList.value = res.results.createPoems
            collectPoetry.value = res.results.collectPoetry
            userInfo.value = res.results.userInfo
            userInfo.value.avator = userInfo.value.avator ? import.meta.env.VITE_BASE_URL + userInfo.value.avator : getAssetsFile('default-avator.png')
        }
    })
}
const getPoemsList = () => {
    poetryDetailSe.getPoemsListByUid().then((res: any) => {
        if(res.status == 'success') {
            createPoemsList.value = res.results
        }
    })
}

// 跳转诗歌详情
const goToPoetryDetail = (pid: number) => {
    console.log('pid', pid)
    router.push({ 
        name: 'poetryDetail',
        params: {
            id: pid
        }
    })
}

// 点击作品
let isOpenPoetry = ref<boolean>(true)
const openPoetry = () => {
    isOpenPoetry.value = !isOpenPoetry.value
}
// 点击诗单
let isOpenPoems = ref<boolean>(false)
const openPoems = () => {
    isOpenPoems.value = !isOpenPoems.value
}
// 创建诗单
let isOpenCreatePoemsAlert = ref<boolean>(false)
const createPoems = () => {
    isOpenCreatePoemsAlert.value = true
}
const closeAlert = (val: string) => {
    isOpenCreatePoemsAlert.value = false
    if(val == 'success') {
        // getUserInfo()
        getPoemsList()
    }
}
// 跳转诗单详情
const goToPoemsDetail = (pl_id: number) => {
    router.push({ 
        name: 'poemsDetail',
        params: {
            poemsId: pl_id
        }
    })
}
onMounted(() => {
    getUserInfo()
    getPoemsList()
})
</script>

<style lang="less" scoped>
.user-info {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 6rem);
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    background-color: var(--bg-color);
    .u-i-content {
        width: 100%;
        background-color: var(--bg-color);
        // background-color: var(--bg-color-gray);
        .u-i-c_top {
            width: 100%;
            height: 7rem;
            background-color: var(--bg-color);
            .u-t-img {
                text-align: center;
                /* height: 6rem; */
                /* width: 6rem; */
                margin-top: 1rem;
                .u-t-i {
                    width: 6rem;
                    height: 6rem;
                    border-radius: 50%;
                    overflow: hidden;
                    margin: 0 auto;
                }
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .u-i-c_bottom {
            margin-top: 1rem;
            min-height: 12rem;
            background-color: var(--bg-color);
            .u-t-menu {
                height: 2.5rem;
                position: relative;
                .ut-m {
                    height: 100%;
                    box-sizing: content-box;
                    border: none;
                }
                .ut-m-active {
                    border-bottom: 2.5px solid var(--font-color-red) !important;
                }
                .m-c-h {
                    height: 100%;
                    text-align: center;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: row;
                    // font-weight: 600;
                    font-size: 15px;
                    color: var(--font-color-gray);
                    span {
                        // font-weight: 600;
                        font-size: 15px;
                        color: var(--font-color-gray);
                    }
                    .m-c-count {
                        // margin: 0 0.75rem;
                        margin-right: 0.5rem;
                        margin-left: 0.25rem;
                    }
                    svg {
                        vertical-align: top;
                        path {
                            fill: var(--font-color-gray);
                        }
                    }
                }
            }
            .u-t-content {
                .u-t-c {
                    min-height: calc(100vh - 21rem);
                    position: relative;
                }
                .no-data {
                    min-height: calc(100vh - 21rem);
                    font-size: 16px;
                    color: var(--font-color-gray);
                }
                .md-b-ul {
                    .md-b-li {
                        padding: 0.75rem;
                        box-sizing: border-box;
                        border-bottom: 1px solid var(--border-color-gray1);
                        .li-top {
                            height: 2rem;
                            width: 100%;
                            .l-title {
                                font-size: 16px;
                                font-weight: 600;
                                color: var(--font-color-black);
                            }
                            .l-dynasty {
                                color: var(--font-color-gray);
                            }
                            .l-content {
                                color: var(--font-color-gray);
                            }
                        }
                        .md-poems-list {
                            width: 100%;
                            height: 4rem;
                            .pl-left {
                                // border-radius: 50%;
                                width: 3.5rem;
                                height: 3.5rem;
                                overflow: hidden;
                                border: 1px solid var(--border-color-gray1);
                                padding: 0.2rem;
                                float: left;
                                img {
                                    width: 100%;
                                    height: 100%;
                                    // border-radius: 50%;
                                }
                            }
                            .pl-right {
                                padding: 0.5rem 0;
                                margin-left: 5rem;
                                box-sizing: border-box;
                                height: 100%;
                                display: flex;
                                align-items: center;
                                .pl-name {
                                    font-size: 16px;
                                }
                                .pl-creator, .pl-name {
                                    color: var(--font-color-black);
                                    font-size: 14px;
                                }
                            }
                        }
                    }
                }
                .create-poetry {
                    // min-height: calc(100vh - 21rem);
                    .c-p-ul {
                        .cp-u-li {
                            box-sizing: border-box;
                            padding: 0.75rem;
                            // height: 3rem;
                            border-bottom: 1px solid var(--border-color-gray1);
                            .li-cover {
                                position: relative;
                                width: 3rem;
                                height: 3rem;
                                border: 1px solid var(--border-color-gray1);
                                padding: 0.2rem;
                                float: left;
                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            .li-c-lock {
                                position: absolute;
                                bottom: 7px;
                                right: 7px;
                                path {
                                    fill: var(--font-color-gray);
                                }
                            }
                            .li-right {
                                margin-left: 4rem;
                            }
                            .li-count, .li-name {
                                max-width: 100%;
                                color: var(--font-color-black);
                            }
                            .li-count {
                                margin-top: 0.5rem;
                            }
                        }
                    }
                }
                .md-menu {
                    width: 100%;
                    height: 2.5rem;
                    line-height: 2.5rem;
                    font-size: 16px;
                    color: var(--font-color-gray);
                    padding-left: 1rem;
                    box-sizing: border-box;
                    span {
                        color: var(--font-color-gray);
                    }
                    .md-len {
                        margin-left: 0.15rem;
                        margin-right: 0.35rem;
                    }
                    .open {
                        // margin-top: -1rem;
                        svg {
                            vertical-align: unset;
                        }
                    }
                }
                .md-menu1 {
                    margin-top: 0.75rem;
                }
                .c-p-title {
                    // position: sticky;
                    // bottom: 0;
                    text-align: center;
                    height: 2.5rem;
                    line-height: 2.5rem;
                    font-size: 16px;
                    font-weight: 600;
                    color: var(--font-color-red);
                    // border-bottom: 1px solid var(--font-color-red);
                    .add-icon {
                        path {
                            fill: var(--font-color-red);
                        }
                    }
                }
            }
        }
    }
}
path {
    fill: var(--font-color-gray);
}
.active {
    color: var(--font-color-red) !important;
    span {
        color: var(--font-color-red) !important;
    }
    path {
        fill: var(--font-color-red) !important;
    }
}
</style>